<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
 <jsp:include page="../header.jsp"></jsp:include>


<form class="layui-form">
		<div class="layui-input-inline">
		<input  class="layui-input" type="text" name="name" placeholder="名称关键字">
		</div>
		<div class="layui-input-inline">
		<input  class="layui-input" type="text" name="start" placeholder="开始时间">
		</div>
		<div class="layui-input-inline">
		<input  class="layui-input" type="text" name="end" placeholder="结束时间">
		</div>
		<div class="layui-input-inline">
		<input  class="layui-input" type="number" name="bonus" placeholder="项目奖金">
		</div>
		<div class="layui-input-inline">
		<button  class="layui-btn layui-btn-normal" lay-submit lay-filter="search" type="submit" ><i class="layui-icon layui-icon-searcho"></i>搜索按钮</button>
		</div>
</form>


<table id="project-list" lay-filter="project-list"></table>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="batchDelete">批量删除</button>
	</div>
</script>

<script type="text/javascript">
  
layui.use(['table','form'], function(){
	  var table = layui.table;
	  var form =layui.form;
	  var $ = layui.jquery;
	  //表单提交事件
	  form.on('submit(search)',function(data){
		  
		  //获取表单中的数据
		  /* layer.msg(JSON.stringify(data.field)); */
		  
		  //重新刷新表格
		  table.reload('project-list',{
			  page:{cerr:1},
		  	  where:data.field,
		  
		  
		  });
		  return false;
	  });
	  
	  //渲染
	  table.render({
		    elem: '#project-list'
		    ,id:'project-list'
		    ,height:520
		    ,url: 'project/list' //数据接口
		    ,method: 'post'
		    ,page: true //开启分页
		    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
		    ,cols: [[ //表头
		      {type: 'checkbox'},
		      {field: 'id', title: 'ID'},
		      {field: 'name', title: '名称'},
		      {field: 'start', title: '开始时间'},
		      {field: 'end', title: '结束时间'},
		      {field: 'bonus', title: '项目奖金'}
		      
		    ]],
		    done:function(res,curr,count){
		    	
		    	//count >0 并且当前页没有数据
		    	if(count>0 && res.data.length==0){
		    		table.reload('project-list',{page:{cerr:1}});
		    	}
		    	
		    	
		    }
		  });
	  
	  //绑定头部工具栏时间
	  table.on('toolbar(project-list)', function(obj){
		  //获取被选中的数据
		  var checkStatus = table.checkStatus(obj.config.id);
		  switch(obj.event){
		  	case 'batchDelete':
		        var data = checkStatus.data;
		        layer.alert(JSON.stringify(data));
		        var arr = [];
		        data.forEach(function(item){
		        	arr.push(item.id)
		        	
		        });
		        
		        $.ajax({
		        	url:'project/batchDelete',
		        	type:'post',
		        	data:{ids:arr},
		        	dataType:'json',
		        	success:function(data){
		        		if(data.code > 0){
		        		layer.msg("删除成功！！");
		        		}else{
		        			layer.msg("删除失败！！");
		        		}
		        		//重新渲染
		        		table.reload('project-list',{});
		        		
		        	},error:function(){
		        		
		        		
		        	},
		        	
		        	
		        });
		  
		  }
		  
	  });

	  
});
  
  
</script>

<jsp:include page="../footer.jsp"></jsp:include>
